<template>
  <!-- 废弃 -->
  <!-- 爬虫关联曲线对话框 -->
  <el-dialog
    :visible.sync="reptileCurveDialogVisible"
    top="70px"
    width="50%"
    @open="open()"
    @opened="opened()"
    :before-close="closeDialog"
  >
    <span class="main">
      <div id="statChart" :style="{ width: '100%', height: '450px' }"></div>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog('cancel')">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ["reptileCurveDialogVisible", "selectReptileList"],
  data() {
    return {
      // 所有爬虫统计曲线列表
      reptileCurveList: [
        {
          name: "douban_spider",
          type: "line",
          // stack: "总量",
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "test_reptile",
          type: "line",
          // stack: "总量",
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "爬虫3",
          type: "line",
          // stack: "总量",
          data: [220, 100, 200, 120, 150, 330, 130],
        },
      ],
      // 选中爬虫统计曲线列表
      selectReptileListChart: [],
    };
  },
  methods: {
    open() {
      this.selectReptileListChart = this.reptileCurveList.filter((element) => {
        return this.selectReptileList.indexOf(element.name) != -1;
      });
    },
    opened() {
      //   this.$nextTick(() => {
      //     this.statChart();
      //   });
      console.log(this.selectReptileList);
      this.$echarts.dispose(document.getElementById("statChart"));
      this.statChart();
    },
    // 绘制折线图
    statChart() {
      // 解决警告dom元素多次加载问题 顺带解决取消勾选，折线不消失问题
      //   let statChart;
      //   if (document.getElementById("statChart") == null) {
      //     return;
      //   }
      //   this.$echarts.dispose(document.getElementById("statChart"));
      // 基于准备好的dom，初始化echarts实例
      let statChart = this.$echarts.init(
        document.getElementById("statChart"),
        "chalk"
      );
      // 绘制图表
      statChart.setOption({
        title: {
          text: "关联爬虫统计曲线",
        },
        // hover 显示竖线和值
        tooltip: {
          trigger: "axis",
        },
        // 图表上方内容选项
        legend: {
          data: this.selectReptileList,
        },
        // 周围边距
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // 下载为图片按钮
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1", "2", "3", "4", "5", "6", "7"],
        },
        yAxis: {
          type: "value",
        },
        series: this.selectReptileListChart,
      });
    },
    // 关闭弹出框
    closeDialog() {
      this.$emit("closeDialog");
    },
  },
};
</script>

<style lang='less' scoped>
.main {
  display: block;
}
</style>